<!-- 课程班级 -->
<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{show == 1 ? '报名学习' : '需求制定' }}</block>
		</cu-custom>

		<!-- 报名学习 -->
		<view class="wrap" v-if="show == 1">
			<scroll-view scroll-y style="height: 100%;width: 100%;padding-bottom: 52px;">
				<view class="cu-timeline" v-for="(item,index) in xqList" :key="index">
					<view class="cu-time">
						<text class='cuIcon-selection text-white text-lg bg-blue round padding-xs'></text>
						<text class='text-xl margin-left'>{{item.title}}</text>
					</view>
			
					<view class="cu-item text-blue" v-for="(arr,index2) in item.children" :key="index2">
						<view class="content">
							<view class="cu-capsule radius">
								<view class="cu-tag bg-blue">{{arr.tag1}}</view>
								<view class="cu-tag line-blue">{{arr.tag2}}</view>
							</view>
							<view class="margin-top" >
						<rich-text :nodes="arr.content"></rich-text>
							</view>
						</view>
					</view>
			
			
				</view>
			</scroll-view>
		</view>

		<!-- 需求制定 -->
		<view class="wrap" v-if="show == 2">
	
			<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index == TabCur?'text-blue cur':''" v-for="(item,index) in list"
					:key="index" @tap="tabSelect(index,item)" :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
	
			<scroll-view scroll-y style="height: 100%;width: 100%;padding-bottom: 52px;">
				<view class="cu-timeline" v-for="(item,index) in xqList" :key="index">
					<view class="cu-time">
						<text class='cuIcon-selection text-white text-lg bg-blue round padding-xs'></text>
						<text class='text-xl margin-left'>{{item.title}}</text>
					</view>

					<view class="cu-item text-blue" v-for="(arr,index2) in item.children" :key="index2">
						<view class="content">
							<view class="cu-capsule radius">
								<view class="cu-tag bg-blue">{{arr.tag1}}</view>
								<view class="cu-tag line-blue">{{arr.tag2}}</view>
							</view>
							<view class="margin-top">
							<rich-text :nodes="arr.content"></rich-text>
							</view>
						</view>
					</view>


				</view>
			</scroll-view>

			<!-- 第四页 -->
			<!-- 	<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
			
						<view class="cu-timeline">
							<view class="cu-time">
								<text class='cuIcon-selection text-white text-lg bg-blue round padding-xs'></text>
								<text class='text-xl margin-left'>解决方案+项目源码（已上线）</text>
							</view>
							<view class="cu-item text-blue">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag bg-blue">智慧物业解决方案</view>
										<view class="cu-tag line-blue">包含原型</view>
									</view>
									<view class="margin-top">
										<view>项目案例：西安多家物业公司</view>
										<view class="margin-top-sm">
											包含资料：智慧社区/物业/小区：PPT（多个）、智慧物业解决方案、功能规划书、业务规划书、可经营项目分析、项目营销方案、市场营销计划书、物业呼叫中心建设方案、智慧小区建设方案等
										</view>
										<view class="margin-top-sm">包含软件：智慧物业管理系统、物业人员App、业主App、业主小程序</view>
										<view class="margin-top-sm">
											包含功能：基础配置、企业管理、门禁管理、通知公告、故障报修、物业缴费、停车管理、财务管理、快递代收、家政服务、巡更管理、违法随手怕、教育服务等
										</view>
										<view class="margin-top-sm">价格：点击 [业务咨询]，价格面议</view>
									</view>
								</view>
							</view>
							<view class="cu-item text-blue">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag bg-blue">平安校园项目方案</view>
										<view class="cu-tag line-blue">包含原型</view>
									</view>
									<view class="margin-top">
										<view>
											项目依托已架设的硬件设备及后台人脸识别服务、车辆信息服务、重点人群数据库、地图数据库等，完成对辖区内目标学校周边可疑人员、车辆的追踪、定位和分析。对“护学岗”工作人员的位置信息追踪，确保护学行动顺利开展。通过摄像头视频及各位置数据的分析，达到有效的预警，以减少针对幼儿、青少年的拐卖、群体事件和交通事故的发生。
										</view>
										<view class="margin-top-sm">价格：点击 [业务咨询]，价格面议</view>
									</view>
								</view>
							</view>

							<view class="cu-item text-blue">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag bg-blue">停车场/智慧停车解决方案</view>
										<view class="cu-tag line-blue">包含原型</view>
									</view>
									<view class="margin-top">
										<view>基于小区/商业/路边停车场的建设方案，包含PPT、功能表及功能描述、痛点解决方案、支付相关方案、AI车辆识别等</view>
										<view class="margin-top-sm">价格：点击 [业务咨询]，价格面议</view>
									</view>
								</view>
							</view>

							<view class="cu-item text-blue">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag bg-blue">旧物回收解决方案</view>
										<view class="cu-tag line-blue">包含原型</view>
									</view>
									<view class="margin-top">
										<view>基于旧物回收建设的软件系统及项目资料，功能包含商家入驻、一键下单、积分商城、权限管理、分佣管理、新闻资讯、车辆管理等模块及业务介绍</view>
										<view class="margin-top-sm">价格：点击 [业务咨询]，价格面议</view>
									</view>
								</view>
							</view>

							<view class="cu-item text-blue" style="padding-bottom: 320rpx;">
								<view class="content">
									<view class="cu-capsule radius">
										<view class="cu-tag bg-blue">更多项目方案</view>
										<view class="cu-tag line-blue">业务咨询</view>
									</view>
									<view class="margin-top">
										<view></view>
										<view class="margin-top-sm">了解更多请点击 [业务咨询]</view>
									</view>
								</view>
							</view>

						</view>
					</scroll-view>
				</swiper-item>
 -->

		</view>

		<!-- 资讯按钮 -->
		<view class="cu-bar bg-white tabbar shop shadow edit-fixed">
			<button class="action text-gray text-shadow">
				<view class='cuIcon-community text-gray'>
				</view>
			</button>
			<view class="action text-gray text-shadow">
				<text class="text-sm">169人已咨询</text>
			</view>
			<view class='bg-gradual-blue submit margin-left-xl text-xl'>
				<button class='button-no' open-type="contact" @contact="handleContact">
					<text class='text-white'>业务咨询</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	export default {
		data() {
			return {
				xqList: [],
				show: 1,
				current: 0,
				requestStatus: false, // 事件防抖

				scrollLeft: 0,
				list: [],
				swiperCurrent: 0,
				dx: 0,
				TabCur: 0,
			};
		},
		created() {
	
		},
		onLoad(option) {
			
			
			let opts = {
				url: 'system/dict/data/type/sys_xq_type1',
				method: 'get'
			};
			uni.showLoading({
				title: '加载中'
			});
			request.httpRequest(opts).then(res => {
				// console.log(res);
				uni.hideLoading();
				if (res.statusCode == 200) {
					let list = res.data.data.map(item => {
						return {
							name: item.dictValue
						}
					})
			
					this.list = list.slice(2, list.length)
			
			
					if (option.mid == 1) {
								this.getData(list[0].name)
						this.show = 1;
					} else {
							this.getData(this.list[0].name)
						this.show = 2;
							
					}
			
				} else {
					console.log('数据请求错误～');
				}
			});
			console.log(option.mid)
		
		},
		methods: {
			// tab栏切换

			tabSelect(index, item) {
				console.log(item.title)
				this.TabCur = index;
				this.scrollLeft = (index - 1) * 60;
				if (this.requestStatus) { // 时间防抖：利用 return 终止函数继续运行
					return false;
				};
				this.requestStatus = true;
				setTimeout(() => {
					this.getData(item.name);
					this.requestStatus = false; // 模拟执行完毕，改变 requestStatus
				}, 300);

			},
			getData(value) {

				let opts = {
					url: 'system/xq/app/list?type=' + value,
					method: 'get'
				};
				uni.showLoading({
					title: '加载中'
				});
				request.httpRequest(opts).then(res => {
					// console.log(res);
					uni.hideLoading();
					if (res.statusCode == 200) {
						console.log(res.data.rows)

						let result = res.data.rows.reduce((acc, curr) => {
							let newacc = []
							console.log(curr)
							if (acc[curr.title]) {




								acc[curr.title].children.unshift({
									content: curr.content,
									tag1: curr.tag1,
									tag2: curr.tag2
								});
							} else {
								acc[curr.title] = {
									title: curr.title,
									children: [{
										content: curr.content,
										tag1: curr.tag1,
										tag2: curr.tag2
									}]
								};
							}
							// console.log(acc)
							return acc;
						}, {});

						console.log(Object.values(result), "test")
						this.xqList = Object.values(result)


					} else {
						console.log('数据请求错误～');
					}
				});

			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.cu-timeline .cu-time {
		width: 100%;
		text-align: left;
		padding: 20rpx 0 20rpx 37rpx;
		font-size: 26rpx;
		color: #888;
		display: block;
	}

	.text-red,
	.line-red,
	.lines-red {
		color: #FF3434;
	}

	.margin-avatar {
		margin-left: -15rpx;
	}

	.margin-avatar-bottom {
		margin-bottom: 150rpx;
	}

	.line-blue-tuniao::after {
		border-color: #0070ff !important;
		color: #0070ff;
	}

	.resume {
		/* background: #f1f1f1; */
		padding-top: 10rpx;
		border-radius: 6rpx;
		display: block;
		color: #666;
		line-height: 1.6;
	}

	.resume+.resume {
		margin-top: 20rpx;
	}

	.resume2 {
		padding-top: 10rpx;
		border-radius: 6rpx;
		display: block;
		color: #666;
		line-height: 1.6;
	}

	.edit {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		bottom: 250rpx;
		right: 30rpx;
		z-index: 1;
		opacity: 0.8;
		border: 1px solid #189eff;
		border-radius: 100rpx;
		box-shadow: 0rpx 0rpx 6rpx rgba(24, 158, 255, 1);
		padding: 20rpx;
	}

	.love {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		bottom: 550rpx;
		right: 30rpx;
		z-index: 1024;
		opacity: 0.8;
		border: 1px solid #189eff;
		border-radius: 100rpx;
		box-shadow: 0rpx 0rpx 6rpx rgba(24, 158, 255, 1);
		padding: 20rpx;
	}

	.bg-img-cont {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 350rpx;
	}

	.share-png {
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto;
	}

	.share-wechat {
		width: 35rpx;
		height: 35rpx;
		margin: 0 10rpx -4rpx 0;
		opacity: 0.5;
	}

	.button-no::after {
		border: none;
	}

	.title-pyq {
		background-image: -webkit-linear-gradient(0deg, #1b6cff, #1ca5ff);
		/*1B6CFF 1B42FF*/
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		opacity: 0.5;
	}

	.edit-fixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.button-no {
		border: none;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 300rpx;
			border-radius: 50%;
			margin: 0 auto;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
